<template>
	<scroll-view scroll-x="true" class="table-container">
		<view class="hb-table">
			<view class="thead" :style="{backgroundColor:headBg}">
				<view class="tr ">
					<block v-for="(head,index) of head" :key="index">
						<view class="th">{{head}}</view>
					</block>
				</view>
			</view>
			<view class="tbody">
				<block v-for="(item,index) of properties" :key="index">
					<view class="tr">
						<block v-for="(val,j) of item" :key="j">
							<view class="td" :style="{width:theadWidth+'px'}">{{val}}</view>
						</block>
					</view>
				</block>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: 'hbTable',
		props: {
			head: { //表头
				type: Array,
				default: []
			},
			headBg: {
				type: String,
				default: '#fff'
			},
			properties: { //表格数据
				type: Array,
				default: []
			}
		},
		data() {
			return {
				theadWidth: 35
			}
		},
		mounted() {
			let that = this;
			this.$nextTick(() => {
				that.init();
			})
		},
		methods: {
			init() {
				let that = this;
				new Promise((resolve, reject) => {
					uni.createSelectorQuery()
						// #ifndef MP-ALIPAY
						.in(this)
						// #endif
						.select('.thead>.tr>.th')
						.boundingClientRect()
						.exec(ret => {
							that.theadWidth = ret[0].width
							resolve()
						})
				})
			}
		}
	}
</script>

<style lang="less">
	.table-container {
		display: flex;
		width: 100%;
		white-space: nowrap;
		height: 100%;
		background-color: white;
	}

	.hb-table {
		display: inline-flex;
		flex-direction: column;
		border: 1px solid #ccc;

		&.table-noborder {
			border-right: 1rpx solid #ccc;
		}

		.tr {
			white-space: nowrap;
		}

		.thead {
			display: inline-flex;

			.th {
				text-align: center;
				border-right: 1px solid #ccc;
				display: inline-block;
				border-bottom: none;
				padding: 16rpx;
				border-left: none;
				white-space: nowrap;
			}

			.th:last-child {
				border-right: 0 none;
			}
		}

		.tbody {
			.td {
				text-align: center;
				border: 1px solid #ccc;
				display: inline-block;
				border-bottom: none;
				padding: 16rpx;
				border-left: none;
				white-space: nowrap;
			}

			.td:last-child {
				border-left: 0 none;
				border-right: 0 none;
			}
		}
	}
</style>
